<template>
  <div>
    <div v-show="isReadOnlyPage">
      <p v-show="isArr" v-for="(item, index) in value" :key="index">{{item && item.name}}</p>
      <p v-show="!isArr">{{strValue}}</p>
    </div>
    <a-select v-show="!isReadOnlyPage" :getPopupContainer="node => node.parentNode" :allowClear="keys !== 'workFlow' ? true : false" :value="selected" @change="handleChange" @select='handleSelect(keys)' :placeholder="'请选择'" :mode="selectorMode" :disabled="((keys === 'weChatPositionType' || keys === 'workFlow') && !isDisabled) ? stepAggsIsAbled : isDisabled">
      <template v-if="mode === 'setFormVal'">
        <a-select-option v-for="(item) in values" :key="item.id + ''" :value="item.id" :disabled="item.isChecked">{{item.title}}</a-select-option>
      </template>
      <template v-if="mode === 'multiple'">
        <a-select-option v-for="(item) in values" :key="item.id + ''" :value="item.id" :disabled="item.isChecked">
          <a-tooltip placement="top" >
            <template slot='title'>
              {{item.name}}
            </template>
            {{item.name}}
          </a-tooltip>
        </a-select-option>
      </template>
      <template v-if="mode !== 'setFormVal' && mode !== 'multiple'">
        <a-select-option v-for="(item) in values" :key="item.id + ''" :value="item.id">{{item.name}}</a-select-option>
      </template>
    </a-select>
  </div>
</template>
<script>
export default {
  name: 'Select',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: ['value', 'values', 'isReadOnlyPage', 'mode', 'isDisabled', 'keys', 'stepAggsIsAbled', 'isResume'],
  computed: {
    selectorMode () {
      if (this.mode) {
        return this.mode
      }
      return 'default'
    },
    selected () {
      return this.value
      // if (this.mode === 'multiple') {
      //   if (!this.value) {
      //     return []
      //   }
      //   return this.value.map(v => v.id)
      // } else {
      //   if (this.value) {
      //     return this.value.id
      //   } else {
      //     return null
      //   }
      // }
    },
    strValue () {
      if (!this.value) {
        return ''
      }
      let val = this.itemById(this.value.id)
      if (val) {
        return val.name ? val.name : val.title
      }
      return ''
    },
    isArr () {
      return Array.isArray(this.value)
    }
  },
  methods: {
    itemById (id) {
      return this.values.find(item => {
        if (item.id === id) {
          return true
        }
        return false
      })
    },
    handleChange (value) {
      console.log(value)
      this.$emit('change', value)
    },
    handleSelect (key) {
      this.$emit('ckeckedKeys', key)
    }
  }
}
</script>
<style lang="stylus" scoped>
</style>
